<template>
  <el-button type="primary" @click="testBtn">测试各种事件使用</el-button>
  <p>{{counter}}</p>
  <p>{{doubleCounter}}</p>
  <p>{{msgs}}</p>
  <p ref="test">123</p>
  <el-input v-model="input" ref="input" @keyup.enter="submit" placeholder="请输入内容"></el-input>
<!--  这个keyup事件在vue3里面加不加native都可以监测到，但是我记得vue2里面必须加上native。刚测试了（不清楚是elementUI的优化还是vue3的优化）-->
  <el-switch v-model="value1" active-text="按月付费" @change="switchChange" ref="switch" active-value="0" inactive-value="1" inactive-text="按年付费"></el-switch>
  <el-result icon="success" title="成功提示" subTitle="请根据提示进行操作">
    <template #extra>
<!--      vue3的插槽名称可以直接#name，不在需要 slot='name'-->
      <el-button type="primary" size="medium">返回</el-button>
    </template>
  </el-result>
<!--  这里的modele用的就是teleport传送-->
  <modele></modele>
<!--  这里的就是测试新出的emit属性值-->
  <testEmit @click="onclick"></testEmit>
</template>

<script>
import {computed, reactive, onMounted, onUnmounted, ref, toRefs, watch} from 'vue'
import modele from "./modele.vue";//这里必须带上文件的扩展名.vue,好像是由于vite导致的
import testEmit from "./testEmit.vue";


export default {
  name: 'HelloWorld',
  components:{modele,testEmit},
  setup(){
    // const data=reactive({
    //   counter : '1',
    //   doubleCounter:computed(()=>data.counter*2)
    // })
    // let timer
    // onMounted(()=>{
    //   timer=setInterval(()=>{
    //     data.counter++
    //   },1000)
    // })
    // onUnmounted(()=>{
    //   clearInterval(timer)
    // })
    // let data=initSetupData()
    let {counter,doubleCounter}=initSetupData()  //如果进行了toRefs转化，这里需要析构赋值,否则需要按照上一行写。下面第二行也是这样
    let msgs=ref('这个是一个单变量')//也就是msgs直接就是一个字符串类型的值，且是相应的。不是对象
    let test=ref(null) //ref的另一个用法是可以直接获取template中的ref指向的dom元素，这个时候ref的值要为null ，test和上文的p标签的ref值相同
    // watch(()=>data.counter,(val ,oldVal)=>{    //  watch监测的一定是个单变量，比如data.counter,这个不是单变量，所以需要进行函数返回
    //   let p=test.value //把ref指向的dom付给p
    //   p.textContent=`counter change from ${oldVal} to ${val}`
    // })
    watch(counter,(val ,oldVal)=>{
      let p=test.value //把ref指向的dom付给p
      p.textContent=`counter change from ${oldVal} to ${val}`
    })
    return {counter,doubleCounter,msgs,test}
    // return {data,msgs,test}
  },
  data() {
    return {
      input:'',
      count: 0,
      value1:'0',   //el-switch的值的判断方式为长等于  ===
    }
  },
  methods:{
    onclick(){
      console.log('点击了')
    },
    testBtn(){
      this.counter=3
      this.$refs.input.focus()
    },
    switchChange(val){
    },
    submit(){
      console.log('回车了')
    }
  }
}
function initSetupData(){
  const data=reactive({
    counter : '1',
    doubleCounter:computed(()=>data.counter*2)
  })
  let timer
  onMounted(()=>{
    timer=setInterval(()=>{
      data.counter++
    },1000)
  })
  onUnmounted(()=>{
    clearInterval(timer)
  })
  //由于data是有多个属性值，所以可以使用 toRefs 进行一下转化，把data中的值转化为单变量，就是上面的msgs
  return toRefs(data)
  // return data
}
</script>
